<template>
	<view>
		<view style="position: relative;">
			<view class="box" :style="{backgroundImage:`url(${imageUrl}/banner.jpg)`}"></view>
			<view class="mainbox">
				<view class="nebox" @tap="nev(index)" v-for="(tab,index) in tabList" :key="index">
					<view :class="['netive_box',index===ind && 'active_box']">
						<u-icon size="60" :name="tab.iconName" :custom-prefix="tab.customIcon?'custom-icon':'uicon'"
							:color="index===ind?'#d81e06':'#FFF'" />
					</view>
					{{ tab.text }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			value: { //目前为第几个标签活动
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				ind: this.value,
				tabList: [{
						text: '校庆资询',
						iconName: "file-text-fill",
						customIcon: false
					},
					{
						text: '校庆活动',
						iconName: "gift-fill",
						customIcon: false
					},
					{
						text: '历任领导',
						iconName: "leader-fill",
						customIcon: true
					},
					{
						text: '杰出校友',
						iconName: "doctoral-cap-fill",
						customIcon: true
					},
					{
						text: '部门信息',
						iconName: "branch-fill",
						customIcon: true
					},
				]
			}
		},
		computed: {
			imageUrl() {
				return this.$t.URL.staticImg
			},
		},
		methods: {
			nev: function(a) {
				this.ind = a;
				this.$emit("input", a)
				this.$emit("click", a)
			}
		}
	}
</script>



<style scoped>
	.box {
		width: 100%;
		height: 300rpx;
		background-repeat: no-repeat;
		background-position: 0 0;
		background-size: cover;
	}

	.mainbox {
		width: 100%;
		display: flex;
		position: relative;
		justify-content: space-around;
		top: -50rpx;
	}

	.nebox {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		text-align: center;
	}

	.active_box {
		background: #FFF !important;
		border: solid 2rpx rgba(0, 0, 0, 0.1) !important;
		;
		margin-bottom: 10rpx !important;
		;
		margin-top: -10rpx !important;
		;
	}

	.netive_box {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 80rpx;
		height: 80rpx;
		border-radius: 20rpx;
		margin-bottom: 0rpx;
		margin-top: 0rpx;
		transition: all 0.2s;
		background: linear-gradient(to top, #bb1e1e, #d25939);
	}
</style>
